<style lang="less">
    @import "../../../styles/common.less";
</style>
<template>
    <Row>
        <i-col>
        <div class="page-control">
            <Form ref="formValidate" :label-width="90">
                <Row>
                    <i-col span="6">
                    <FormItem label="关键字">
                        <Input v-model="searchKey" placeholder="维度关键字" size="small" ></Input>
                    </FormItem>
                    </i-col>
                    <i-col span="6" v-show="expand">
                        <FormItem label="维度类型">
                            <Select size="small" v-model="model1">
                                <Option v-for="item in dimCategory" :value="item.value" :key="item.value">{{ item.label }}
                                </Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col span="6" v-show="expand">
                        <FormItem label="更新时间">
                            <DatePicker size="small" type="daterange" split-panels style="width: 100%" :options="dataRangeOption" placement="bottom-end" placeholder="选择更新起止日期"></DatePicker>
                        </FormItem>
                    </i-col>

                    <i-col span="4">
                        <FormItem :label-width="10">
                            <Button type="primary" size="small" >
                                <Icon type="search"/>  查询
                            </Button>
                            <a href="#" style="margin-left: 10px;" @click="expand=!expand"><Icon type="grid"></Icon> {{expand?'收起选项':'更多选项'}}</a>

                        </FormItem>
                    </i-col>
                </Row>
            </Form>
        </div>
        <div class="page-content">
            <Row style="height: 24px;line-height: 24px;margin-bottom: 10px;">
                <i-col>
                <Button type="primary" size="small" >
                    <Icon type="plus"/>  增加
                </Button>
                <Dropdown style="margin-left: 10px" v-show="selection.length" trigger="click" >
                    <Button type="default" size="small" >
                        批次执行...
                        <Icon type="arrow-down-b"></Icon>
                    </Button>
                    <DropdownMenu slot="list">
                        <DropdownItem><Icon type="close"/> 删除</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
                </i-col>
            </Row>
            <Table border :context="self" :loading="loading" :row-class-name="rowClassName" :columns="table.columns"
                   :data="table.data"  @on-selection-change="selectionChange"></Table>
            <div style="display: block;padding-top: 10px;text-align: right">
                <Page :total="40" @on-change="pageNumChange" @on-page-size-change="pageSizeChange" size="small" show-elevator show-sizer></Page>
            </div>
        </div>
        </i-col>
    </Row>
</template>

<script>
  import data from './data';
  import dimCategory from './dimCategory';
  import dataRangeOption from './data-range-option';
  export default {
    components: {},
    data () {
      return {
        self: this,
        table: data,
        model1: 'brand',
        dimCategory: dimCategory,
        selection: [],
        loading: false,
        expand: false,
        searchKey: '',
        dataRangeOption: dataRangeOption
      };
    },
    computed: {},
    methods: {
      rowClassName (row, index) {
        if (row.eventLevel === '紧急') {
          return 'table-row-warning';
        }
        return '';
      },
      selectionChange (selection) {
        this.selection = selection;
      },
      pageNumChange (pageNum) {
        console.info(pageNum)
      },
      pageSizeChange (pageSize) {
        console.info(pageSize)
      }
    }
  };
</script>
